﻿<h2>Textbox</h2>
<p>
    Initially blank:
    <input id="textbox-initially-blank" @bind(textboxInitiallyBlankValue) />
    <span id="textbox-initially-blank-value">@textboxInitiallyBlankValue</span>
</p>
<p>
    Initially populated:
    <input id="textbox-initially-populated" @bind(textboxInitiallyPopulatedValue) />
    <span id="textbox-initially-populated-value">@textboxInitiallyPopulatedValue</span>
</p>

<h2>Checkbox</h2>
<p>
    Initially unchecked:
    <input id="checkbox-initially-unchecked" @bind(checkboxInitiallyUncheckedValue) type="checkbox" />
    <span id="checkbox-initially-unchecked-value">@checkboxInitiallyUncheckedValue</span>
</p>
<p>
    Initially checked:
    <input id="checkbox-initially-checked" @bind(checkboxInitiallyCheckedValue) type="checkbox" />
    <span id="checkbox-initially-checked-value">@checkboxInitiallyCheckedValue</span>
</p>

<h2>Select</h2>
<p>
    <select id="select-box" @bind(selectValue)>
        <option value=@SelectableValue.First>First choice</option>
        <option value=@SelectableValue.Second>Second choice</option>
        <option value=@SelectableValue.Third>Third choice</option>
        @if (includeFourthOption)
        {
            <option value=@SelectableValue.Fourth>Fourth choice</option>    
        }
    </select>
    <span id="select-box-value">@selectValue</span>
    <button id="select-box-add-option" @onclick(AddAndSelectNewSelectOption)>Add and select new item</button>
</p>

@functions {
    string textboxInitiallyBlankValue = null;
    string textboxInitiallyPopulatedValue = "Hello";

    bool checkboxInitiallyUncheckedValue = false;
    bool checkboxInitiallyCheckedValue = true;

    bool includeFourthOption = false;
    enum SelectableValue { First, Second, Third, Fourth }
    SelectableValue selectValue = SelectableValue.Second;

    void AddAndSelectNewSelectOption()
    {
        includeFourthOption = true;
        selectValue = SelectableValue.Fourth;
    }
}
